import { useEffect, useState } from "react"
import { GetCascaderFnc, AddCategoryFnc, EditCategoryFnc } from '@/api/category'
import style from './index.module.scss'
import { itemType } from './type'
import PropTypes from "prop-types"
import { Modal, Form, Input, Button, message, Cascader } from "antd"


const AddEditBox = ({isModalOpen, dialogType, changeDialog, init, pageNow, pageSize, catName, catID}: itemType) => {
  const [form] = Form.useForm()
  const [options, setOptions] = useState([]) // 级联选择器数据
  const [formObj, setFormObj] = useState({}) // 用于做比较的form

  // 初始化下拉选择框数据
  const initFnc = async () => {
    const res = await GetCascaderFnc({type: 2})
    if(res.data.meta.status === 200) {
      setOptions(res.data.data)
    }

    // 打开编辑盒子 获得catName
    if(dialogType === 'edit') {
      form.setFieldsValue({cat_name: catName})
      setFormObj({cat_name: catName})
    }
  }
  useEffect(() => { initFnc() }, [catName])

  // 公告消息
  const publicMsg = (msg: string) => {
    message.success(msg, 1.5, () => {
      changeDialog(false)
      form.setFieldsValue({cat_name: ''})
      init(pageNow, pageSize)  
    })
  }

  // 添加 或 修改
  const onFinish = async (value: {cat_name: string}) => {
    if(dialogType === 'add') { // 添加
      const res = await AddCategoryFnc({ cat_name: value.cat_name, cat_pid: 0, cat_level: 0 })
      if(res.data.meta.status === 201) publicMsg('添加成功') 
    } else { // 修改
      if(JSON.stringify(value) === JSON.stringify(formObj)) {
        changeDialog(false)
      } else {
        const res = await EditCategoryFnc(catID, {cat_name: value.cat_name})
        if(res.data.meta.status === 200) publicMsg('修改成功') 
      }
    }
  }

  return (
    <Modal title={dialogType === 'add' ? '添加分类' : '修改分类'} open={isModalOpen} footer={null} onCancel={() => changeDialog(false)}>
       <Form form={form} className={style.form} onFinish={onFinish} labelCol={{ span: 4 }}>
          <Form.Item name="cat_name" label="分类名称" rules={[{ required: true, message: '请输入分类名称' }, {min: 3, max: 10, message: '长度在3-10个字符'}]}>
            <Input/>
          </Form.Item> 

          {dialogType === 'add' 
            ? <Form.Item label="父级分类"> 
               <Cascader style={{width: 200}} options={options} fieldNames={{label: 'cat_name', value: 'cat_id', children: 'children'}}  placeholder="--请选择--" /> 
              </Form.Item> 
            :  '' 
          }

          <Form.Item style={{marginBottom: 0}}>
            <div className={style.btn}>
              <Button type="default" onClick={() =>changeDialog(false)}>取消</Button>
              <Button type="primary" htmlType="submit">确定</Button>
            </div>
          </Form.Item>
        </Form>

    </Modal>
  )
}

export default AddEditBox

AddEditBox.protoTypes = {
  isModalOpen: PropTypes.bool.isRequired,
  dialogType: PropTypes.string.isRequired,
  changeDialog: PropTypes.func.isRequired,
  init: PropTypes.func.isRequired,
  pageNow: PropTypes.number.isRequired,
  pageSize: PropTypes.number.isRequired,
  catName: PropTypes.string.isRequired,
  catID: PropTypes.number.isRequired
}